@import "reset";
@import "scss_common";
@import "css_common";

@font-face{
  font-family:web;
  src:url(../images/web-webfont.ttf);
}

$color:#13d4c8;

header{
  height:j(88);
  width:100%;
  section{
    background:#3c3c3c;
    position:fixed;
    z-index:9;
    top:0;
    left:0;
    width:100%;
    height:j(88);
    text-align:center;
    color:$color;
    font-size:j(28);
    line-height:100%;
    @extend %item_alignCenter;
    text-align:center;
    flex-direction:column;
    -webkit-flex-direction:column;
    span{
      display:block;
    }
  }
}

#container{
  //max-width:j(640);
  margin:0 auto;
  padding-bottom:j(100);
}
.title{
  position:absolute;
  left:j(10);
  top:j(10);
  font-weight:bold;
  height:j(60);
  font-size:j(26);
  background-position:left center;
  line-height:j(60);
  -webkit-background-size:j(61) j(60); background-size:j(61) j(60);
  padding-left:j(61);
}
.pc{
  @include bg('pc.png');
}
.pr{
  @include bg('pr.png');
}
.po{
  @include bg('po.png');
}
nav{
  color:#3c3c3c;
  background:#efefef;
  margin:j(5) 0;
  padding:j(10) j(20);

  ul{
    li{
      border-bottom:1px solid #c0c0c0;
      padding:j(10) 0;
      @extend %flex_box;
      font-size:j(24);
      @extend %verAC;
      label{
        @extend %flex;
        @extend %flex_box;
        s{
          width:10px;
          text-decoration:none;
          margin-right:5px;
        }
        span{
          @extend %flex;
        }
      }
      p{
        @extend %flex;
        text-align:right;
        color:$color;
        font-weight:bold;
      }
    }
    > :last-child{
      border:none;
    }
  }
}

.hd{
  width:100%;
  margin-bottom:j(5);
  height:j(45);
  line-height:j(40);
  font-size:j(28);
  background:#828282;
  padding:0 j(20);
  color:#fff;
}

.hd.toggle_bar{
  position:relative;
  cursor:pointer;
  &:after{
    @extend %after;
    width:0;
    height:0;
    right:j(20);
    position:absolute;
    top:50%;
    border-left:j(20) solid transparent;
    border-right:j(20) solid transparent;
    border-top:j(20) solid #18ecdf;
    font-size:j(24);
    -webkit-transition:all .3s; -moz-transition:all .3s; -ms-transition:all .3s; -o-transition:all .3s; transition:all .3s;
    transform-origin:50% 50%;
    -webkit-transform-origin:50% 50%;
    -webkit-transform:translateY(-50%) rotate(0deg); -moz-transform:translateY(-50%) rotate(0deg); -ms-transform:translateY(-50%) rotate(0deg); -o-transform:translateY(-50%) rotate(0deg); transform:translateY(-50%) rotate(0deg);
  }
  + .bd{
    display:none;
  }
}

.hd.open{
  &:after{
    -webkit-transform:translateY(-50%) rotate(180deg); -moz-transform:translateY(-50%) rotate(180deg); -ms-transform:translateY(-50%) rotate(180deg); -o-transform:translateY(-50%) rotate(180deg); transform:translateY(-50%) rotate(180deg);
  }
  + .bd{
    display:block;
  }
}

.bd{
  font-size:j(24);
  //border-bottom:1px solid #e0e0e0;
  margin-bottom:j(30);
  color:#626262;
  @at-root .flex_list{
    border-bottom:1px solid #e0e0e0;
    li{
      @extend %flex_box;
      .item{
        @extend %flex;
        p{
          padding:j(10) j(20);
          min-height:j(34);
        }
        > :nth-child(1){
          background:#efefef;
        }

      }

      .attachment{
        overflow:hidden;

        p{
          padding:0 j(20);
          span{
            display:block;
            border-bottom:1px solid #e0e0e0;
          }
        }
        > :nth-child(1){
          height:j(35);
          line-height:j(35);
        }
        > :nth-child(2){
          margin:0 j(-20);
          span{
            padding:j(10) j(20);
          }
          :last-child{
            border-bottom:none;
          }
        }
      }
      > :nth-child(1){
        border-right:1px solid #e0e0e0;
      }
    }

  }
}

.flex_list_vertical{
  .history{
    @extend %flex_box;
    p{
      padding:j(10) j(20);
      @extend %flex;
      border-right:1px solid #e0e0e0;
      @extend %verAC;
    }
    :last-child{
      border:none;
    }
    border-bottom:1px solid #e0e0e0;
  }
  li:nth-child(odd) .history{
    background-color:#efefef;
  }
  .approval_comments{
    background-color:#fff !important;
    span{
      padding:j(10) j(20);
      display:block;
    }
  }
}

.table{
  .num{
    padding:j(10) j(20);
    display:inline-block;
    background:#dcdcdc;
  }
  th, td{
    text-align:center;
    padding:j(5) 0;
    border:1px solid #e0e0e0;
  }
  th{
    background:#efefef;
  }
  .desc{
    white-space:normal;
    word-break:break-all;
  }
  tbody > tr:nth-child(odd) > td:first-child{
    padding:4px;
  }
  tbody > tr:nth-child(even){
    display:none;
  }
  .btn{
    background-color:$color;
    text-align:center;
    color:#fff;
    @include whj(40, 40);
    line-height:j(40);
    font-weight:bold;
    display:block;
    margin:0 auto;
    cursor:pointer;
  }
}

.color{
  color:#13d4c8;
}

.money{
  margin-top:5px;
  th{
    background:#efefef;
  }
  th, td{
    border:1px solid #e0e0e0;
    text-align:center;
    padding:j(5) 0;
  }
}

.comments{
  margin-top:5px;
  span{
    display:block;
    padding:j(10) 0;
  }
}

footer{
  @extend %flex_box;
  height:j(100);
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  background:#07b2cb;
  a{
    color:#fff;
    height:j(100);
    font-size:j(24);
    @extend %flex;
    text-align:center;
    @extend %item_alignCenter
  }
  :nth-child(2){ background:#13d4c8; }
  :nth-child(3){ background:#2ec2b7; }
}

/*侧滑*/
.sideSwipe{
  position:fixed;
  width:100%;
  height:100%;
  background:#fff;
  z-index:10;
  top:0;
  left:0;
  right:0;
  bottom:0;
  -webkit-transition:all .3s; -moz-transition:all .3s; -ms-transition:all .3s; -o-transition:all .3s; transition:all .3s;
  -webkit-transform:translateX(100%); -moz-transform:translateX(100%); -ms-transform:translateX(100%); -o-transform:translateX(100%); transform:translateX(100%);
  #sideSwipe_form{
    width:j(600);
    margin:0 auto;
    padding-top:10%;

  }
  h3{
    color:$color;
    font-size:j(28);
    margin-bottom:j(20);
  }
  textarea{
    border:1px solid $color;
  }
  #remarks{
    font-size:j(24);
    width:j(600);
    resize:none;
    height:j(200);
    padding:j(10);

  }
  .waring{
    border-color:#f00!important;
  }

  .btn_wrap{
    margin-top:j(20);
    text-align:right;
    .side_btn{
      display:inline-block;
      border:1px solid $color;
      @include whj(158,65);
      line-height:j(65);
      text-align:center;
      font-size:j(24);
      color:$color;
      margin-left:j(10);
    }
    #sideSwipe_btn{
      color:#fff;
      background:$color;
    }
  }
}

.sideSwipe.in{
  -webkit-transform:translateX(0); -moz-transform:translateX(0); -ms-transform:translateX(0); -o-transform:translateX(0); transform:translateX(0);
}


/*common_popupWindow*/
#popupTipsLocation{
  @extend %box_alignCenter;
  background-color:rgba(0, 0, 0, .4);
  .popup_wrap{
    background-color:#fff;
    -webkit-border-radius:j(20); -moz-border-radius:j(20); border-radius:j(20);
    @include whj(540, 259);
    -webkit-transform: scale(1.185);
    -ms-transform: scale(1.185);
    transform: scale(1.185);
    opacity:0;
    -webkit-transition:all .3s; -moz-transition:all .3s; -ms-transition:all .3s; -o-transition:all .3s; transition:all .3s;
    .text{
      height:70%;
      @extend %item_alignCenter;
      text-align:center;
      font-size:j(28);
    }

    .btn_box{
      @extend %flex_box;
      height:30%; border-top:1px solid #ddd;
      :first-child{
        border-left:none;
      }
    }
    .btn_public{
      color:#06c;
      @extend %item_alignCenter;
      @extend %flex;
      font-size:j(24);
    }
    .btnYes{
      border-left:1px solid #ddd;
    }
  }
  .popin{
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity:1;
  }
  .popout{
    -webkit-transform: scale(0.815);
    -ms-transform: scale(0.815);
    transform: scale(0.815);
    opacity:0;

  }
}